import styled from 'styled-components';
import style from '../../assets/global-style';

export const List = styled.div`
    display: flex;
    align-items: center;
    width: fit-content;
    height: 30px;
    overflow: hidden;
    /* 
        > 直接子代选择器
        伪类 :first-of-type表示一组兄弟元素中其类型的第一个元素 
    */
    >span:first-of-type {
        display: flex;
        flex: 0 0 auto;
        padding: 5px 0;
        margin-right: 5px;
        color: gray;
        font-size: ${style['font-size-m']};
        vertical-align: middle;
    };
`

export const ListItem = styled.span`
    flex: 0 0  auto;
    font-size: ${style['font-size-m']};
    padding: 5px 8px;
    border-radius: 10px;
    &.selected {
        color: ${style['theme-color']};
        border: 1px solid ${style['theme-color']};
        opacity: 0.8;
    };
`